<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/mui.css">
    <link rel="stylesheet" href="./css/mui.min.css">
    <script src="./js/vue.js"></script>
    <script src="./js/mui.min.js"></script>
    <script src="./js/mui.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .app{
            width: 100%;
            background-color: #ccc;
            padding: 20px;
        }
        .app .panel{
            width: 100%;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            align-items: center;
        }
        .app .panel .item{
            flex: 1;
            padding: 0 20px;
            display: flex;
            align-items: center;
        }
        .app .panel .item input{
            width: 70%;
        }
        .courses{
            width: 100%;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            margin-top: 20px;
        }
        .courses ul{
            list-style: none;
        }
        .courses ul li{
            display: flex;
        }
        .courses .first{
            background-color: #369;
        }
        .courses ul li span{
            flex:3;
            text-align: center;
            border: 1px solid #eee;
            padding: 10px;
        }
        .courses ul li span .no{
            flex: 1;
        }
        .courses ul li span .opt{
            display: flex;
            justify-content: space-around;
        }

        /* 编辑面板的样式 */

        .edit_wrap{
            width: 400px;
            height:500px;
            background-color: #fff;
            border-radius: 10px;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-200px,-250px);
            /* display: none; */
            z-index: 999;
            padding: 20px;
        }
        .edit_wrap h3{
            text-align: center;
            font-size: 24px;
            font-family: "微软雅黑";
            color:#444;
            padding:20px;
            margin-bottom: 40px;
            border-bottom: 1px solid #ddd;
        }
        .edit_wrap div{
            display: flex;
            align-items: center;
            padding: 20px;
        }
        .edit_wrap div span{
            flex:1;
        }
        .edit_wrap div input{
            flex:3
        }
        .edit_wrap .edit_btn_wrap{
            display: flex;
            justify-content: space-evenly;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="panel">

            <!-- <div class="item">
                序号:<input type="text" v-model="id">
            </div> -->

            <div class="item">
                课程名:<input type="text" v-model="cname">
            </div>

            <div class="item">
                专业:<input type="text" v-model="major">
            </div>

            <div class="item">
                主讲教师:<input type="text" v-model="teacher" @keyup.enter="add">
            </div>
         

            <div>
                <button type="button" class="mui-btn mui-btn-primary" @click="add">绑定</button>
                <!-- <button type="button" class="mui-btn">绑定</button>
                <button type="button" class="mui-btn mui-btn-primary">绑定</button>
                <button type="button" class="mui-btn mui-btn-success">绿色</button>
                <button type="button" class="mui-btn mui-btn-warning">黄色</button>
                <button type="button" class="mui-btn mui-btn-danger">红色</button>
                <button type="button" class="mui-btn mui-btn-royal">紫色</button>  --> 
            
            </div>
            <div class="item">
                搜索:<input type="text" @keyup="search(keyword)" v-model="keyword">
            </div>
            
        </div>

        <div class="courses">
            <ul>
                <li class="first">
                    <span class="no">序号</span>
                    <span class="course">课程名</span>
                    <span class="major">专业方向</span>
                    <span class="teacher">教师</span>
                    <span class="opt">
                      操作
                    </span>
                </li>

                <li v-for="(item,index) in search(keyword)"  :key="item.id">
                <span class="no">{{index+1}}</span>
                <span class="course">{{item.cname}}</span>
                <span class="major">{{item.major}}</span>
                <span class="teacher">{{item.teacher}}</span>
                <span class="opt">
                    <button type="button" class="mui-btn mui-btn-success" @click="edit(item.id)">编辑</button>
                    <button type="button" class="mui-btn mui-btn-danger" @click="del(item.id)">删除</button>
                </span>
            </li>
            </ul>
            <!-- <ul>
                <li>
                    <span class="no">1</span>
                    <span class="course">前端框架基础</span>
                    <span class="major">软件工程前端开发方向</span>
                    <span class="teacher">老李</span>
                    <span class="opt">
                        <button type="button" class="mui-btn mui-btn-success">编辑</button>
                        <button type="button" class="mui-btn mui-btn-danger">修改</button>
                    </span>
                </li>

                <li>
                    <span class="no">2</span>
                    <span class="course">计算机网络</span>
                    <span class="major">软件工程前端开发方向</span>
                    <span class="teacher">平静</span>
                    <span class="opt">
                        <button type="button" class="mui-btn mui-btn-success">编辑</button>
                        <button type="button" class="mui-btn mui-btn-danger">修改</button>
                    </span>
                </li>

                <li>
                    <span class="no">3</span>
                    <span class="course">数据库</span>
                    <span class="major">软件工程前端开发方向</span>
                    <span class="teacher">邓熊</span>
                    <span class="opt">
                        <button type="button" class="mui-btn mui-btn-success">编辑</button>
                        <button type="button" class="mui-btn mui-btn-danger">修改</button>
                    </span>
                </li>

                <li>
                    <span class="no">4</span>
                    <span class="course">软件工程</span>
                    <span class="major">软件工程前端开发方向</span>
                    <span class="teacher">汪家楠</span>
                    <span class="opt">
                        <button type="button" class="mui-btn mui-btn-success">编辑</button>
                        <button type="button" class="mui-btn mui-btn-danger">修改</button>
                    </span>
                </li>
            </ul> -->

        </div>

        <div class="edit_wrap" v-if="edit_wrap_show">
            <!-- 这是编辑面板 -->
            <h3>编辑课程信息</h3>
          <div> 
              <span>课程名：</span>
              <input type="text"  v-model="edit_cname" >
          </div>

          <div>
            <span>所属专业：</span>
            <input type="text"   v-model="edit_major">
         </div>

        <div>
            <span>主讲教师：</span>
            <input type="text"   v-model="edit_teacher">
        </div>


        <div class="edit_btn_wrap">
          <button type="button" class="mui-btn mui-btn-success" @click="edit_accept">确定</button>
          <button type="button" class="mui-btn mui-btn-warning" @click="edit_cancel">取消</button>
        </div>

        </div>

    </div>

  <script>
      var vm = new Vue({
          el:'.app',
          data : {
              id:'',
              cname:'',
              major:'',
              teacher:'',
              keyword:'',
                list:[
                    {"id":0,'cname':"C#","major":"软件工程","teacher":"吴老师"},
                    {"id":1,'cname':"数据库","major":"软件工程","teacher":"石老师"},
                    {"id":2,'cname':"javascript","major":"软件工程","teacher":"李老师"},
                ],
                edit_wrap_show:false,
                mask:{},
                edit_cname:'',
                edit_major:'',
                edit_teacher:'',
              newItem:{},
              changeID:'',
          },
          methods:{
                add:function(){
                        if(this.cname.length > 0 && this.major.length > 0 && this.teacher.length > 0){
                            console.log(this.id);
                            this.list.push({"cname":this.cname, "major":this.major,"teacher":this.teacher});
                            console.log(this.list);
                        }else{
                            alert('请输入完整信息!');
                        }
                },

                del:function(id){
                        // for(var i=0;i<this.list.length;i++){
                        //     if(this.list[i].id == index){
                        //      console.log(index);
                        //      this.list.splice(i,1);
                        //     }
                        // }
                        // ES5 数组api
                        this.list.forEach((item,i) => {
                            if(item.id == id){
                              this.list.splice(i,1);
                            }
                        })

                        // 2.[].map()
                        // this.list.map(function(item,index){
                        //     return {id: item.id, cname: '软工-' + item.cname, major: item.major, teacher: item.teacher}
                        // })

                       // 3.[].filter()
                    // this.list = this.list.filter(function(item,index){
                    //     return item.id != id;
                    // })

                },

                search:function(keyword){
                        var result = [];
                        for(var i=0;i<this.list.length;i++){
                            if(this.list[i].cname.indexOf(keyword) > -1){
                                result.push(this.list[i]);
                            }
                        }
                        return result;
                },

                edit:function(id){
                    this.mask = mui.createMask(function(){
                        return false;
                    });
                    this.edit_wrap_show=true;
                    this.mask.show(); //显示遮罩
                    // 把被编辑的记录填充到编辑面板的文本框中
                    // 1.拿记录
                    // this.list.forEach(function(item,index){
                    //     if(id == item.id){
                    //         console.log(vm);
                    //         vm.edit_cname = item.cname;
                    //         vm.edit_major = item.major;
                    //         vm.edit_teacher = item.teacher;
                    //     }
                       
                    // })
                    this.list.forEach((item,i) => {
                        if(id == item.id){
                            this.edit_cname = item.cname;
                            this.edit_major = item.major;
                            this.edit_teacher = item.teacher;
                        }
                        changeID=id;
                    })
      
                },

                edit_accept:function(){
                    console.log(changeID);
                    newItem = {"id":changeID,"cname":this.edit_cname,"major":this.edit_major,"teacher":this.edit_teacher};
                    console.log(this.list);
                    console.log(newItem);      
                   Vue.set(this.list,changeID,newItem);
                //    　Vue.forceUpdate();
                    // Vue.set(this.list,i,newItem);

                       this.mask._remove();
                     this.edit_wrap_show = false;
                },

                edit_cancel:function(){
                    // 因为mui.createMask(callback)的回调函数callback
                    // this.mask.close();
                    this.mask._remove(); //close()在内部调用了_remove(),然后在调用callback，_remove()是不调用callback的
                    this.edit_wrap_show = false;
                },

             
              
          }
      })
  </script>
</body>
</html>